<template>
  <div class="header">
    <div class="back" @click="$router.go(-1)">
      <img src="@/assets/back.png" alt="" />
    </div>
    <div class="search" @click="$router.push('/search')">
      <img src="@/assets/search.png" alt="" />
      <span>输入城市/景点/游玩主题</span>
    </div>
    <div class="address" @click="goAddress()">
      <span>{{cityVal}}</span>
      <img src="@/assets/tab_down.png" alt="" />
    </div>
  </div>
</template>

<script>
import json from '../../../../static/mock/index.json'
export default {
  props:["cityVal"],
  data(){
    return{
      json
    }
  },
  methods:{
    goAddress(){
      this.$router.push({
        path:'/address',
        query:{
          val:this.cityVal
        }
      })
    }
  }
};
</script>

<style scoped lang="scss">
.header {
  padding: 0 20px;
  height: 44px;
  background: #00bcd4;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  .search {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 10px;
    height: 24px;
    font-size: 12px;
    border-radius: 5px;
    margin: 0 20px;
    color: #e6e6e6;
    background-color: #ffffff;
  }
}
</style>